<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡林记</title>
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css" rel="stylesheet"
        crossorigin="anonymous"> -->
    <link rel="stylesheet" href="./bootstrap.css">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./jQuery/jquery-1.12.4.js">
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="top">
            <img src="./images/logo.png" alt="" class="logo1">
            
            
            <button class="btn btn-primary border-0 bg-transparent" type="button" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions"><img src="./images/or.png" alt="" class="lo-op">
            </button>

            <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions"
                aria-labelledby="offcanvasWithBothOptionsLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                      <ul class="nav flex-column cebiannav mx-auto ">
                        <li class="nav-item">
                          <a class="nav-link active text-danger-emphasis" aria-current="page" href="#">网站首页</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-black" href="./aboutsus.html">关于我们</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-black" href="./consulting.html">公司资讯</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link text-black" href="#">美食展示</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-black" href="#">合作共赢</a>
                          </li>
                        <li class="nav-item">
                            <a class="nav-link text-black" href="#">联系我们</a>
                        </li>
                      </ul>

                </div>
            </div>


        </div>
        <img src="./images/headbg.png" alt="" class="logo-bton">
        <!-- 轮播图区 -->
        <div class="lunbotu">
            <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active" data-bs-interval="2000">
                        <img src="./images/2-1Z114094100H4.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item" data-bs-interval="2000">
                        <img src="./images/2-1Z114094100H4.jpg" class="d-block w-100" alt="...">
                    </div>
                    <!-- <div class="carousel-item" data-bs-interval="1000">
                    <img src="https://pics7.baidu.com/feed/fc1f4134970a304ec51a484238d0b78bc9175c70.jpeg@f_auto?token=e02d80630932f9fe78f2baae76c07fe8" class="d-block w-100" alt="...">
                  </div> -->
                </div>
            </div>
        </div>
        <!-- 美食展示文本 -->
        <div class="zhanshi">
            <span>美食展示</span>
        </div>
        <!-- table框 -->
        <ul class="nav nav-underline mb-3 justify-content-center " id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active text-danger-emphasis" id="pills-home-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                    aria-selected="true">热卖面食</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-danger-emphasis" id="pills-profile-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                    aria-selected="false">汉味小吃</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-danger-emphasis" id="pills-contact-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
                    aria-selected="false">特色饮食</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-danger-emphasis" id="pills-disabled-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled"
                    aria-selected="false">炒饭煨汤</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
                tabindex="0">

                <!-- table栏中的轮播图 -->
                <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                      <div class="carousel-item active" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G435340-L.jpg" alt="">
                                <div>
                                    <span>全料热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G433340-L.jpg" alt="">
                                <div>
                                    <span>炸酱热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G432350-L.jpg" alt="">
                                <div>
                                    <span>牛肉热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G431360-L.jpg" alt="">
                                <div>
                                    <span>牛肚热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G430340-L.jpg" alt="">
                                <div>
                                    <span>虾仁热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G435340-L.jpg" alt="">
                                <div>
                                    <span>全料热干面</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                <!--  -->
                
            </div>
            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
                tabindex="0">

                <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                      <div class="carousel-item active" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G500420-L.jpg" alt="">
                                <div>
                                    <span>三鲜豆皮</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G459290-L.jpg" alt="">
                                <div>
                                    <span>鲜肉馄饨</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G454450-L.jpg" alt="">
                                <div>
                                    <span>鲜肉汤包</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G449370-L.jpg" alt="">
                                <div>
                                    <span>灌汤蒸饺</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G44U60-L.jpg" alt="">
                                <div>
                                    <span>重油烧卖</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G500420-L.jpg" alt="">
                                <div>
                                    <span>三鲜豆皮</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>


            </div>
            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"
                tabindex="0">

                <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                      <div class="carousel-item active" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Q029153H2233.jpg" alt="">
                                <div>
                                    <span>豆浆</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z121105402550.jpg" alt="">
                                <div>
                                    <span>米酒</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Q0291F5090-L.jpg" alt="">
                                <div>
                                    <span>银耳汤</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Q029162H50-L.jpg" alt="">
                                <div>
                                    <span>绿豆沙</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Q029153954264.jpg" alt="">
                                <div>
                                    <span>桂花糊米酒</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Q029153H2233.jpg" alt="">
                                <div>
                                    <span>豆浆</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
            <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab"
                tabindex="0">

                <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                      <div class="carousel-item active" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G543340-L.jpg" alt="">
                                <div>
                                    <span>香菇肉丝炒饭</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G541010-L.jpg" alt="">
                                <div>
                                    <span>玉米火腿炒饭</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G53Z00-L.jpg" alt="">
                                <div>
                                    <span>老干妈肉丝炒饭</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Z11G53F10-L.jpg" alt="">
                                <div>
                                    <span>鸡蛋火腿炒饭</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                      <div class="carousel-item" data-bs-interval="100000">
                        <div class="table-box">
                            <div class="table-box-div">
                                <img src="./images/2-1Q0291A0570-L.jpg" alt="">
                                <div>
                                    <span>排骨藕汤</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                            <div class="table-box-div">
                                <img src="./images/2-1Q029155333438.jpg" alt="">
                                <div>
                                    <span>海带排骨汤</span>
                                    <img src="./images/guan.png" alt="">
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>
        <!-- 查看更多 -->
        <div class="view">
            <a href=""><img src="./images/iadds.png" alt=""></a>
        </div>

    </div>

    <!-- 第二页 -->
    <div class="box-page-two">
        <div class="page-two-top"><span>门店展示</span></div>

        <div class="tab-box">
            <div class="tab-content " id="nav-tabContent">
                <div class="tab-pane show active mdzhanshi" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
                    <img src="./images/2-1Q21010312R17.jpg" alt="">
                    <p><img src="./images/shopa_1.png" alt="">蔡林记吉庆街店<span>武汉市江岸区中山大道667...</span></p>
                </div>
                <div class="tab-pane mdzhanshi" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
                    <img src="./images/2-1Q2101053514S.jpg" alt="">
                    <p><img src="./images/shopa_1.png" alt="">蔡林记户部巷店<span>汉市武昌区户部巷综合楼...</span></p>
                </div>
                <div class="tab-pane mdzhanshi" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
                    <img src="./images/2-1Z1231049380-L.jpg" alt="">
                    <p><img src="./images/shopa_1.png" alt="">蔡林记积玉桥店<span>武汉市武昌区和平大道积...</span></p>
                </div>
                
            </div>
            <nav class="min-vw-100">
                <div class="nav flex-column min-vw-100 " id="nav-tab" role="tablist">
                  <button class="nav-link active dianming text-white" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true"><img src="./images/shop_list1.png" alt=""> <span>蔡林记吉庆街店</span></button>
                  <button class="nav-link dianming text-white" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false"> <img src="./images/shop_list2.png" alt="">蔡林记户部巷店</button>
                  <button class="nav-link dianming text-white" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false"><img src="./images/shop_list3.png" alt="">蔡林记积玉桥店</button>
                </div>
            </nav>
             
             <!-- 查看更多 -->
            <div class="view2">
                <a href=""><img src="./images/iadds.png" alt=""></a>
            </div>
        </div>

    </div>
    <!-- 第三页 -->
    <div class="box-page-three">
        <div class="page-two-three"><span>企业展示</span></div>
        <div class="page-two-three-box">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-home2" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0"><img src="./images/2-1Q2031AZ2.jpg" alt=""></div>
              <div class="tab-pane fade" id="nav-profile2" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0"><img src="./images/2-1Q203162P4.jpg" alt=""></div>
            </div>
            <div class="gongsiwenben">
                <p>武汉蔡林记商贸有限公司</p>
                <a href="#">始建于上世纪二十年代末，前身为武汉市蔡林记热干面馆。历经几代蔡林记人的努力拼搏...</a>
            </div>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <button class="nav-link active text-white" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home2" type="button" role="tab" aria-controls="nav-home" aria-selected="true">公司总部</button>
                  <button class="nav-link text-danger-emphasis" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile2" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">工厂展示</button>
                </div>
            </nav>
        </div>
    </div>

    <!-- 第四页 -->
    <div class="box-page-four">
        <div class="page-two-four"><span>品牌故事</span></div>
        <div class="pingpai-box">
            <img src="./images/wenz.png" alt="">
            <img src="./images/brand.png" alt="">
        </div>
        <div class="four-bot">
            <span>关注我们</span>
            <div class="four-bot-pg">
                <img src="./images/wx.png" alt="">
                <img src="./images/qq.png" alt="">
                <img src="./images/mo.png" alt="">
            </div>
            <span>Tel：4000-1717-79</span>
        </div>
    </div>




    <script src="./bootstrap.bundle.js"></script>
<!-- 
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.js"
        crossorigin="anonymous"></script> -->
</body>

</html>